<template>
  <div class="exhibition-box" v-if="selectedEParentColumn && selectedEParentColumn.name === '展览展讯'">
    <div class="exhibition-title">{{ selectedEParentColumn.name }}</div>
    <div class="exhibition-content">
      <div class="exhibition-detail">
        <div class="exhibition-tab-list">
          <div v-for="(child, index) in childrenEColumns" :key="index" class="exhibition-tab exhibit-tab-item"
            :class="{ active: selectedChildColumnId === child.columnId }" @click="selectTab(child.columnId)">
            {{ child.name }}
          </div>
        </div>

        <div class="exhibition-tab-content">
          <!-- 展览详情内容 -->
          <div class="exhibition-article-list">
            <div v-for="article in articleEList.slice(0, 1)" :key="article.articleId" class="exhibition-article-item">
              <div class="exhibition-article-content">
                <!-- <div class="fixed-box"></div> -->
                <div  style="background-color: #CFC8B9;">
                      <p>{{ article.resume }}</p>
                      <!-- <img :src="article.coverImageUrl" alt="" class="article-image1"> -->
                </div>
               
              </div>
            </div>
          </div>

          
        </div>
      </div>

      <div class="exhibition-trailer">
        <p class="exhibition-trailer-title">展览预告</p>

        <div class="exhibition-trailer-content">
          <a target="_blank"><img src="../assets/image/static/07.png" /></a>
          <!-- <div class="exhibition-trailer-content-title">{{ selectedEParentColumn.trailerTitle }}</div> -->
        </div>

      </div>
    </div>
  </div>
</template>
  
<script>
import { defineComponent, ref, onMounted } from 'vue';
import { getArticleListService, getChildrencolumnsService, getParentColumnsService } from '@/api/user.js';

export default defineComponent({
  name: 'Exhibition',
  setup() {
    const selectedEParentColumn = ref(null);
    const childrenEColumns = ref([]);
    const articleEList = ref([]);
    const loading = ref(false);
    const selectedChildColumnId = ref(null);

    // 获取父级栏目信息
    const fetchParentColumn = async () => {
      try {
        const response = await getParentColumnsService(null); // 假设 pid 为 null 表示获取顶级栏目
        const exhibitionColumn = response.data.find(column => column.name === '展览展讯');
        if (exhibitionColumn) {
          selectedEParentColumn.value = exhibitionColumn;
          await fetchChildrenColumns(exhibitionColumn.columnId);
        }
      } catch (error) {
        console.error('获取父栏目失败:', error);
      }
    };

    // 获取子栏目信息
    const fetchChildrenColumns = async (parentId) => {
      try {
        const response = await getChildrencolumnsService(parentId);
        childrenEColumns.value = response.data;
        if (childrenEColumns.value.length > 0) {
          selectedChildColumnId.value = childrenEColumns.value[0].columnId;
          await fetcharticleEList(selectedChildColumnId.value);
        }
      } catch (error) {
        console.error('获取子栏目失败:', error);
      }
    };

    // 获取文章列表
    const fetcharticleEList = async (childColumnId) => {
      articleEList.value = [];
      loading.value = true;
      try {
        const response = await getArticleListService({
          subColumnId: childColumnId,
          parentColumnId: selectedEParentColumn.value?.columnId,
          state: '已发布'
        });
        articleEList.value = response.data || [];
      } catch (error) {
        console.error('Failed to fetch articles:', error);
      } finally {
        loading.value = false;
      }
    };

    const selectTab = async (childColumnId) => {
      selectedChildColumnId.value = childColumnId;
      await fetcharticleEList(childColumnId);
    };

    onMounted(() => {
      fetchParentColumn();
    });

    return {
      selectedEParentColumn,
      childrenEColumns,
      articleEList,
      loading,
      selectTab,
      selectedChildColumnId
    };
  }
});
</script>
  
<style scoped>
@import '../assets/css/main/exhibition.css';
</style>